streamwork.module("A9BE666D-8623-4499-B1B8-7FEE8CDDA73B").methodClient = function (elementId, initialData)
{
    /* Save the parameters for later access. */
    var elementId = elementId;
	alert("shit");

    /* We use "visitors" as path for storing the data. */
    var visitorData = initialData.visitors ? initialData.visitors : [];
	
	var Control_Area = null;
	Control_Area = document.getElementById(elementId);

    /* These handlers will be triggered by the runtime upon
       specific events (e.g. method was loaded, ... */
    var handlers = {
        /* Triggered when the method was loaded. */
        started: function() {
            var id = streamwork.getViewerId();
            updateVisitors(getVisitorData(id) ? "update" : "insert", id);
            renderVisitors(streamwork.getParticipants());
			
			Control_Area.innerHTML = "shit shit shit shit shit shit shit shit";
        },

        /* Triggered when new data has been inserted. */
        data_inserted: function(data) {
            visitorData.push(data);
            renderVisitors([streamwork.getParticipantById(data.id)]);
        },

        /* Triggered when data has been updated. */
        data_updated: function(data) {
            updateData(data);
            renderVisitors([streamwork.getParticipantById(data.id)]);
        },

        /* Triggered when an error occurred. */
        notify_error: function(error) {
            /* This is useful when developing the method. */
            alert("error: "+error.message);
        }
    };

    function getVisitorData(viewerId) {
        for (var i = 0; i < visitorData.length; i++) {
            if (visitorData[i].id == viewerId)
                return visitorData[i];
        }
        return null;
    }

    function updateData(data) {
        for (var i = 0; i < visitorData.length; i++) {
            if (visitorData[i].id == data.id) {
                visitorData[i] = data;
                break;
            }
        }
    }

    function updateVisitors(action, viewerId) {
        handlers.clientChannel.publish({
            type: action+"_array_item",
            data: {
                path:  "visitors",
                id:    viewerId,
                value: (new Date()).toGMTString()
            }
        });
    }

    function renderVisitors(visitors) {
        var visitorElement = document.getElementById(elementId);

        for (var i = 0; i < visitors.length; i++) {
            var img = document.getElementById(elementId+"_img"+visitors[i].getId());

            if (!img) {
                img = document.createElement("img");
                visitorElement.appendChild(img);
                
                link = document.createElement("a");
                link.setAttribute("id", "elementId+"_a"+visitors[i].getId());
                link.setAttribute("href", "http://google.de");
                gs = document.createElement("div");
                link.appendChild(gs);
                t = document.createTextNode("fooooooo");
            }

            img.setAttribute("src", visitors[i].getThumbnailUrl());
            img.setAttribute("id", elementId+"_img"+visitors[i].getId());
            img.setAttribute("width", "48");
            img.setAttribute("height", "48");
            img.setAttribute("style", "margin:3px;");

            var data = getVisitorData(visitors[i].getId());
            var lastVisit = data ? new Date(data.value).toLocaleString() : "never";
            
            (function ($) { 
                var how_to_link = $('#'+"help_profile");
                var popup = $('#'+"bubble_profile");
                var hover_on_how_to_link = function(){
                    popup.show();
                };
                var hover_off_how_to_link = function(){
                    popup.hide();
                };
                how_to_link.hover(hover_on_how_to_link, hover_off_how_to_link);
            }) (jQuery);
                        
            img.setAttribute("title", visitors[i].getDisplayName()+" (last visit: "+lastVisit+")");
        }
    }

    /* Make sure your handlers are returned to the
       runtime! This needs to be the last statement. */
    return handlers;
}